<template>
  <a-modal
    title="编辑EMS订单物料"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">
    
    <a-spin :spinning="confirmLoading">
      <a-form>
        <a-row>
          
          
          <a-col :span="12">
            <a-form-item
              label="产品"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback=""
            >
              <a-input placeholder="请输入产品名称"
                       v-decorator="['productName', {rules: [{required: true, message: '请输入产品名称！'}]}]"/>
            </a-form-item>
          </a-col>
          
          <a-col :span="12">
            <a-form-item
              label="序号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback=""
            >
              <a-input placeholder="请输入序号"
                       v-decorator="['extend1', {rules: [{required: true, message: '请输入序号！'}]}]"/>
            </a-form-item>
          </a-col>
          
          <a-col :span="12">
            <a-form-item
              label="软件版本号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback=""
            >
              <a-input placeholder="请输入软件版本号"
                       v-decorator="['extend2', {rules: [{required: false, max: 25, message: '请输入不大于25位长度软件版本号！'}]}]"/>
            </a-form-item>
          </a-col>
          
          <a-col :span="12">
            <a-form-item
              label="数量"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback=""
            >
              <a-input-number placeholder="请输入数量"
                              v-decorator="['number', {rules: [{required: true, message: '请输入数量！'}]}]"
                              :min="0" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="备注"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              has-feedback=""
            >
              <a-input placeholder="请输入备注"
                       v-decorator="['remark', {rules: [{required: false, max: 99, message: '请输入不大于99位长度备注！'}]}]"/>
            </a-form-item>
          </a-col>
        
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>


<script lang="ts">
import {Vue, Component} from "vue-property-decorator";

import {addProduct} from "@/api/modular/main/emsordermaterial/emsOrderMaterialManage";

@Component
export default class ProgressBasicEditModal extends Vue {
  visible = false
  confirmLoading = false
  labelCol = {
    xs: {span: 24},
    sm: {span: 5}
  }
  wrapperCol = {
    xs: {span: 24},
    sm: {span: 15}
  }
  labelColBlock = {
    xs: {span: 24},
    sm: {span: 2}
  }
  wrapperColBlock = {
    xs: {span: 24},
    sm: {span: 20}
  }
  form = this.$form.createForm(this)
  //  table 组件
  materialTypeList = [
    {key: 0, name: '原料'}, {key: 1, name: '线缆'}, {key: 2, name: '包材'},
  ]
  
  
  show(record) {
    console.log('show')
    this.visible = true
  }
  
  handleSubmit() {
    this.visible = true
    this.confirmLoading = true  //确认按钮防抖
    const {form: {validateFields}} = this
    validateFields((errors, values) => {
      // this.confirmLoading = false
      if (!errors) {
        
        addProduct(values).then((res) => {
          this.confirmLoading = false
          //@ts-ignore
          if (res.success) {
            this.$message.success('新增成功')
            this.handleCancel()
            this.$emit('ok', values)
          } else {
            //@ts-ignore
            this.$message.info('新增失败：' + res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      } else {
        this.confirmLoading = false
      }
    })
  }
  
  handleCancel() {
    // this.form.resetFields()
    this.visible = false
    
  }
  
  
}
</script>


<style scoped lang="less">

</style>